<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        h1{
            text-align: center;
            margin: 0px 20px;
        }
        .father{
            width: 70%;
            margin: auto;
            padding: 100px;
        }
        table{
            width: 100%;
            text-align: center;
        }
        tr:nth-of-type(2n+1){
            background: #8df08c;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function (){
            init();
            dolimit();
            select();
        })
        function init() {
            $("tr:gt(0)").remove();
            $.ajax({
                url:"getinvitations",
                data:{
                    pageNo:$("#pageNo").html(),
                    title:search,
                },
                dataType:"json",
                async:false,
                success:function(obj){
                    $("#total").html(obj.total);
                    $("#pages").html(obj.pages);
                    $("#pageNo").html(obj.pageNum);
                    $(obj.list).each(function(i,invit){
                        var tr=$("<tr></tr>");
                        var td1=$("<td>"+invit.title+"</td>")
                        var td2=$("<td>"+invit.summary+"</td>")
                        var td3=$("<td>"+invit.author+"</td>")
                        var td4=$("<td>"+invit.createdate+"</td>")
                        var a=$("<a href="+"toreply?invid="+invit.id+">查看回复</a>")
                        var td5=$("<td></td>")
                        td5.append(a);
                        tr.append(td1,td2,td3,td4,td5)
                        $("table").append(tr)
                    })
                }
            })
        }
        function dolimit(){
            $("#up").click(function (){
                var pageno=$("#pageNo").html()
                if (parseInt(pageno)!=1){
                    $("#pageNo").html(parseInt(pageno)-1);
                    init();
                }
            })
            $("#down").click(function (){
                var pageno=$("#pageNo").html()
                if (parseInt(pageno)!=parseInt($("#pages").html())){
                    $("#pageNo").html(parseInt(pageno)+1);
                    init();
                }
            })
            $("#head").click(function (){
                $("#pageNo").html(1);
                init();
            })
            $("#feet").click(function (){
                $("#pageNo").html($("#pages").html());
                init();
            })
        }
        var search;
        function select(){
            $("#ss").click(function (){
                search=$("form [name=title]").val();
                init();
            })
        }
    </script>
</head>
<body>
<div class="father">
    <h1>帖子列表</h1>
    <div class="one">
        <form>
            <span>帖子标题：</span>
            <input type="text" name="title">
            <input type="button" value="搜索" id="ss">
        </form>
        <table>
            <tr>
                <th>标题</th>
                <th>内容摘要</th>
                <th>作者</th>
                <th>发布时间</th>
                <th>操作</th>
            </tr>
        </table>
    </div>
    <div class="two" >
        一共<span id="total"></span>条数据，第<span id="pageNo">1</span>/<span id="pages"></span>页
        <input id="head" type="button" value="首页">
        <input id="feet" type="button" value="末页">
        <input id="up" type="button" value="上一页">
        <input id="down" type="button" value="下一页">
    </div>
</div>

</body>
</html>